<template>
	<view class="goods-item" :class="type">
		<view class="goods-img-wap" :class="size">
			<image :lazy-load="true" :src="info.Img" @error="errorImage(item)" class="goods-img"  mode="aspectFill">
			</image>
		</view>
		<view class="goods-desc">
			<view class="goods-name"> 
				{{info.Name}}
			</view>
			<view v-if="showSubTitle" class="goods-sub">
				<slot name="subTitle" :text="info.Subtitle">{{info.Subtitle}}</slot>
			</view>
			<view v-if="showTags" class="goods-tag">
				<view v-for="(tag,index) in info.TagArr" :key="tag">
					<uni-tag :inverted="true" :text="tag || info.tag" type="error" size="small" />
				</view>
			</view>
			
			<view v-if="showPrice" class="goods-price" :class="{old:showOldPrice}">
				 <text class="price"><text class="symbol">¥</text>{{info.ShowPrice}}</text>
				 <text class="oldPrice" v-if="showOldPrice"><text class="symbol">¥</text>{{info.OldPrice}}</text>
			</view>
		</view>
		
		<view v-if="showAction" class="goods-action">
			<slot name="action" :text="info">
				<button type="default" size="mini" @click="handleBtnClick()">购买</button>
			</slot>
		</view>
		
	</view>
</template>

<script>
	export default {
		name: 'GoodsItem',
		props: {
			tag: {
				type: String
			},
			info: {
				type: Object
			},
			type: {
				type: String,
				default:"column"
			},
			showSubTitle: {
				type: Boolean,
				default: false
			},
			showPrice: {
				type: Boolean,
				default: true
			},
			showOldPrice: {
				type: Boolean,
				default: false
			},
			showAction:{
				type: Boolean,
				default: false
			},
			showTags: {
				type: Boolean,
				default: false
			},
			size: {
				type: String,
				default: 'base'
			}
		},
		data() {
			return {

			};
		},
		methods: {
			errorImage() {

			},
			handleBtnClick() {
				console.log('@@@')
				this.$emit('btnClick')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.goods-item{
		background-color: #FFFFFF;
		padding: 20rpx 20rpx 0 20rpx!important;
		.goods-name {
			line-height: $uni-font-size-lg + 30rpx;
			font-size: $uni-font-size-base;
			color: #111;
			@include overEllipsis;
		}

		.goods-tag {
			display: flex;
			flex-wrap: wrap;
			padding-bottom: 10rpx;
			.uni-tag {
				font-size: 10rpx;
				margin-right: 10rpx;
				margin-bottom: 10rpx;
			}
		}

		.goods-price {
			color:#498FFF;
			.symbol {
				font-size: $uni-font-size-sm;
			}
			.price {
				font-size: $uni-font-size-lg + 10rpx;
				font-weight: 600;
			}

		}
		
		.goods-sub {
			font-size: $uni-font-size-sm;
			color: #737373;
			margin-top: 10rpx;
		}

		/deep/ .uni-tag--error {
			color: $base-color;
		}
		
		.goods-img-wap {
			position: relative;
			.goods-img {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				border-radius: 20rpx;
				background: #ccc;
			}
		}
		
		&.column {
			.goods-img-wap {
				width: 100%;
				padding-bottom: 100%;
			}
			.goods-sub {
				@include overEllipsisOne;
			}
		}
		
		&.row {
			display: flex;
			flex-direction: row;
			// margin-bottom: 20rpx;
			.goods-img-wap {
				width: 240rpx;
				height: 240rpx;
				&.small {
					width: 160rpx;
					height: 160rpx;
					.goods-img {
						border-radius: 10rpx;
					}
				}
			}
			
			.goods-name {
				line-height: $uni-font-size-lg;
				font-size: $uni-font-size-base;
				
			}
			
			.goods-sub {
				@include overEllipsis;
			}
			
			.goods-desc {
				flex: 1;
				padding: 10rpx 20rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
			}
			
			.goods-price {
				
				text-align: right;
				.symbol {
					font-size: $uni-font-size-sm;
				}
				.price {
					font-size: $uni-font-size-sm + 10rpx;
					font-weight: 600;
				}
				&.old {
					text-align: left;
				}
				.oldPrice {
					padding-left: 10rpx;
					font-size: $uni-font-size-sm;
					color: #999;
					text-decoration: line-through
				}
			
			}
			
			/deep/ .uni-tag--error {
				color: #ccc;
				font-size: 10px;
				border-color: #ccc
				
			}
		}
		
		.goods-action {
			display: flex;
			padding-right: 10rpx;
			align-items: flex-end;
		}
	}
	
	
	
</style>
